<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>找回密码</title>
	</head>
	<link rel="stylesheet" href="css/找回密码.css">
	<body>
		<div id="finding">
			<div class="title">找回密码</div>
			<div class="item"> 
				手机号：<br>
				<input type="text">
				<button id="checkbtn">点击发送验证码</button><br>
				验证码：<br>
				<input type="text"><br>
			</div>
			<script>
			    let btn = document.querySelector('#checkbtn');
			    var timer;
			    var a = 60;
			    btn.addEventListener('click', function () {
			        btn.disabled = true;
			        timer = setInterval(function () {
			            if (a == 0) {
			                btn.innerHTML = '再次发送';
			                btn.disabled = false;
			                clearInterval(timer)
			                a=60;
			            } else {
			                btn.innerHTML = '剩余' + a + '秒';
			                a--;
			            }
			        }, 1000)
			    })
			</script>
			<br>
				<button id="openModalButton" style="background-color: #4f7764;color: white;border: none;width: 100px;height: 30px;border-radius: 5px;margin-top: 110px;" onclick="alert("注册成功!");"
				>确定</button>
		</div>
		<div id="modal" class="modal">
		        <div class="modal-content">
		            <p>验证通过！</p><br>
					请输入新密码：
					<input type="password" >
		            <button id="goToPageButton">确认并进入美食排行</button>
		        </div>
		</div>
		<script src="js/找回密码.js"></script>
	</body>
</html>